let userData = [
    {
        id: 1,
        name: "张三",
        email: "zhangsan@example.com",
        phone: "13800138000",
        registerTime: "2025/09/01 10:30:00"
    },
    {
        id: 2,
        name: "李四",
        email: "lisi@example.com",
        phone: "13900139000",
        registerTime: "2025/09/02 14:15:00"
    }
];

let gridInstance = null;
let userIdCounter = 3; // 从3开始，避免与默认数据冲突

// 更新用户总数显示函数
function updateUsersCount() {
    document.getElementById('userCount').textContent = userData.length;
    document.getElementById('lastUpdateTime').textContent = new Date().toLocaleString();
}
function initGrid() {
    if (gridInstance) {
      gridInstance.destroy(); // 销毁旧实例（用于刷新时重建）
    }
  
    gridInstance = new gridjs.Grid({
      columns: [
        { name: "#", id: "id", width: "8%" },
        { name: "姓名", id: "name", width: "15%", sort: true },
        { name: "邮箱", id: "email", width: "25%", sort: true },
        { name: "电话", id: "phone", width: "15%", sort: true },
        { name: "注册时间", id: "registerTime", width: "20%", sort: true },
        {
          name: "操作",
          id: "actions",
          width: "17%",
          formatter: (cell, row) => {
            return gridjs.h('div', { className: 'text-center' }, [
              gridjs.h('button', {
                className: 'btn btn-sm btn-outline-primary me-1 edit-btn',
                title: '编辑',
                onclick: () => handleEdit(row.cells[0].data) // 暂未实现
              }, gridjs.h('i', { className: 'fas fa-edit' })),
              gridjs.h('button', {
                className: 'btn btn-sm btn-outline-danger delete-btn',
                title: '删除',
                onclick: () => handleDelete(row.cells[0].data)
              }, gridjs.h('i', { className: 'fas fa-trash' }))
            ]);
          }
        }
      ],
      data: userData,
      pagination: {
        enabled: true,
        limit: 5 // 每页5条
      },
      search: true, // 启用搜索
      sort: true,   // 启用排序
      language: {
        search: {
          placeholder: "搜索用户"
        },
        pagination: {
          previous: "上一页",
          next: "下一页",
          showing: "显示第",
          of: "条，共",
          to: "至",
          results: "条记录"
        }
      }
    }).render(document.getElementById("gridjs-container"));
  }
  document.addEventListener('DOMContentLoaded', function () {
    initGrid();
    updateUsersCount();
    bindEventListeners(); // 绑定按钮事件（下一步实现）
  });

function bindEventListeners() {
    const addUserBtn = document.getElementById('btnAddUser');
    const refreshBtn = document.getElementById('btnRefresh');

    addUserBtn.addEventListener('click', function () {
        const newUser = {
            id: userIdCounter,
            name: '新用户' + userIdCounter,
            email: 'newuser' + userIdCounter + '@example.com',
            phone: '1380013800' + (userIdCounter % 10),
            registerTime: new Date().toLocaleString()
        };
        userData.push(newUser); // 添加到数据数组
        userIdCounter++;
        initGrid(); // 重新渲染表格
        updateUsersCount();

        Toastify({
            text: "成功添加新用户",
            duration: 3000,
            close: true,
            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            style: {
                borderRadius: "18px"
            }
        }).showToast();
    });

    refreshBtn.addEventListener('click', function () {
        // 重置数据
        userData = [
            {
                id: 1,
                name: "张三",
                email: "zhangsan@example.com",
                phone: "13800138000",
                registerTime: "2025-09-01 10:30:00"
            },
            {
                id: 2,
                name: "李四",
                email: "lisi@example.com",
                phone: "13900139000",
                registerTime: "2025-09-02 14:15:00"
            }
        ];
        userIdCounter = 3;
        initGrid();
        updateUsersCount();

        Toastify({
            text: "用户数据已刷新",
            duration: 3000,
            close: true,
            backgroundColor: "linear-gradient(to right, #1e3c72, #2a5298)",
            style: {
                borderRadius: "10px"
            }
        }).showToast();
    });
}
function handleDelete(userId) {
    if (confirm(`确定要删除ID为${userId}的用户吗？`)) {
        userData = userData.filter(user => user.id !== userId);
        initGrid();
        updateUsersCount();
        Toastify({
            text: "用户删除成功",
            duration: 3000,
            close: true,
            backgroundColor: "linear-gradient(to right, #ff5f6d, #ffc371)",
            style: {
                borderRadius: "10px"
            }
        }).showToast();
    }
}
function handleEdit(userId) {
    const user = userData.find(u => u.id === userId);
    if (user) {
        Toastify({
            text: `编辑用户：${user.name}（ID：${userId}）（功能待实现）`,
            duration: 3000,
            close: true,
            gravity: "top",
            position: "right",
            backgroundColor: "linear-gradient(to right, #667eea, #764ba2)",
            style: {
                borderRadius: "10px"
            }
        }).showToast();
    }
}